<template>
    <div class="tab-container">
        
        <div class="question">
            <span @click="change" data-id="1" :class="{active:tab==1}">其它问题</span>
            <span @click="change" data-id="2" :class="{active:tab==2}">购买问题</span>
            <span @click="change" data-id="3" :class="{active:tab==3}">出售问题</span>
            
        </div>
        <div class="question-list">
            <div v-show="tab==1">
                <ul>
                    <li>1.交易收费规则</li>
                    <li>2.支持交易的平台及服务器</li>
                    <li>3.怎样修改绑定的手机</li>
                    <li>4.藏宝阁钱包</li>
                    <li>5.抽签制试运行说明</li>
                    <li>6.运营主体说明</li>
                    <li>7.网易支付实名认证可以更改吗</li>
                </ul>
            </div>
            <div  v-show="tab==2">
                <ul>
                    <li>1.怎么查看正在出售的角色？</li>
                    <li>2.如何购买角色？</li>
                    <li>3.支持哪些支付方式？</li>
                    <li>4.购买的角色怎么使用？</li>
                    <li>5.可转入服务器查询与转服操作</li>         
                </ul>
            </div>
            <div  v-show="tab==3">
                <ul>
                    <li>1.什么样的游戏角色才能出售？</li>
                    <li>2.角色出售流程？</li>
                    <li>3.角色上架后会展示哪些信息？</li>
                    <li>4.售出后怎么收款？</li>
                    <li>5.什么是边买边玩？</li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:'HelpsTab',
    data(){
        return{
        tab:1 
        }
    },
    methods:{
       change(e){
        let tabid = e.target.dataset.id
        this.tab = tabid
        }
    },
    
}

</script>
<style  lang="scss" scoped>
.question{
    width: 100%;
    height: rem(130);
    line-height: rem(130);
    background-color: #fff;
    display: flex;
    text-align: center;
    font-size: rem(42);
    span{
        width: 100%;
        flex: 1;
        cursor: pointer;
    }       
}
.question-list{
    width: 100%;
    margin-top: rem(20);
    background-color: #fff;
    padding: 0 rem(30);
    li{
        width: 100%;
        height: rem(130);
        line-height:rem(130) ;
        border-bottom: 1px solid #f5f5f5;
        font-size: rem(40);
    }
}
.active{
    border-bottom: 2px solid #e74e4b;
}


</style>

